<template>
  <div class="step-two">
    <h3 class="requireh3">选择供应商</h3>
    <p>系统根据您的需求,为您推荐了以下供应商 ,您也可替换为您指定的供应商。</p>
    <div class="switch">
      <div class="shop-list">
        <div class="shop-pic" v-for="(pic, index) in shopPic" :key="index">
          <div class="mask"></div>
          <div class="pic-box">
            <img :src="pic.mer_avatar" alt="" class="object" />
            <span class="close" @click="onDelete(index)">x</span>
          </div>
          <p class="shop-name">{{ pic.mer_name }}</p>
        </div>
      </div>
      <div class="sw-btn">
        <m-button
          :disabled="mydata.supportList.indexOf('all') !== -1"
          class="btn-theone"
          @click="onRangeList"
          >换一批</m-button>
        <m-button
          :disabled="mydata.supportList.indexOf('all') !== -1"
          class="btn-thetwo"
          @click="onOtherShop"
          >选择其他商家</m-button>
      </div>
    </div>

    <div class="suppliers-options">
      <p @click="see()">
        您也可以使用全网发送权益。目前您还剩下{{ vipNums }}次全网发布的权益,点击
        <a class="cursor">
          <router-link target="_blank" :to="{path:'/profile/account-setting/vip-benefits'}">升级会员</router-link>
        </a>
        享受更多专享权益。
      </p>
      <checkbox-group v-model="mydata.supportList">
        <checkbox
          class="checkbox-item"
          name="all"
          shape="square"
          checked-color="#E48B2C"
        >
          使用全网发布权益
        </checkbox>
        <checkbox
          v-if="mydata.supportList.indexOf('all') !== -1"
          class="checkbox-item"
          name="zbz"
          shape="square"
          checked-color="#E48B2C"
        >
          仅发送该需求给包装网认证供应商
        </checkbox>
        <checkbox
          class="checkbox-item"
          name="web"
          shape="square"
          checked-color="#E48B2C"
        >
          <div>我同意发送我的联系方式给到响应需求的供应商</div>
          <div class="hoverBox">
            <img src="~/assets/images/icon-remarks.png" alt="" class="icon" />
            <div class="showTxt">
              勾选此项,则平台会发送您的通讯方式给到响应需求的供应商,否则系统只提供您的姓名、公司、邮箱信息。
            </div>
          </div>
        </checkbox>
      </checkbox-group>
    </div>
    <!-- 选择其他商家 -->
    <m-dialog title="选择其他商家" :show-dialog.sync="showDialog" width="752px">
      <div class="title">
        <m-input
          placeholder="请输入关键词搜索"
          clearable
          @change="onSearch"
          v-model="dialogData.mer_name"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </m-input>
        <div class="btns">
          <m-button width="80" class="btn-ok" @click="onConfirm">确定</m-button>
        </div>
      </div>
      <div class="content">
        <div class="shop-list">
          <div class="shop-pic" v-for="(pic, index) in otherShops" :key="index">
            <div class="mask"></div>
            <div class="pic-box">
              <img :src="pic.mer_avatar" alt="" class="object" />
              <checkbox
                v-model="pic.is_true"
                class="close"
                name="zbz"
                checked-color="#E48B2C"
              />
            </div>
            <p class="shop-name">{{ pic.mer_name }}</p>
          </div>
        </div>
      </div>
      <div class="footer">
        <Pagination
          small
          background
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="onPageChange"
        ></Pagination>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup } from "vant"
import MButton from "@/components/common/m-button/MButton"
import MDialog from "@/components/common/m-dialog/MDialog"
import MInput from "@/components/common/m-input/MInput"
import { requireShops, requireRange, requireReplace } from "@/request/api"
import { Pagination } from "element-ui"

export default {
  name: "Requirement2",
  props: {
    mydata: {
      type: Object
    }
  },
  components: {
    Checkbox,
    CheckboxGroup,
    MButton,
    MDialog,
    MInput,
    Checkbox,
    Pagination
  },
  data() {
    return {
      shopPic: [],
      showDialog: false,
      dialogData: {
        mer_name: ""
      },
      page: 1,
      totalPage: 0,
      otherShops: [],
      vipNums: 1  // 剩余发布次数
    }
  },
  watch: {
    shopPic(val){
      localStorage.setItem('shopPic', JSON.stringify(val))
    }
  },
  created() {
    if (!this.mydata.address) {
      this.$parent.active = 0
      // todo
      this.$router.push({ path: "/require/1" })
    }
    this.getShopList()
  },
  methods: {
    see() {
      console.log(this.suppliersCheckList)
    },
    // 获取供应商列表
    getShopList() {
      requireRange().then((res) => {
          if (res.status === 200) {
            this.shopPic = res.data.data
          }
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 删除供应商
    onDelete(index) {
      if (this.mydata.supportList.indexOf("all") === -1) {
        if (this.shopPic && this.shopPic.length > 3) {
          this.shopPic.splice(index, 1)
        } else {
          this.$toastVant.fail("至少选择3个商家!")
        }
      } else {
        this.$message.warning("选择全网发布后不能操作供应商列表!")
      }
    },
    // 换一批
    onRangeList() {
      this.getShopList()
    },
    // 选择其他供应商
    onOtherShop() {
      this.showDialog = true
      this.getOtherShopList()
    },
    getOtherShopList() {
      const params = {
        page: this.page,
        mer_name: this.dialogData.mer_name
      };
      requireShops(params).then((res) => {
        if (res.status === 200) {
          this.otherShops = res.data.data
          this.totalPage = res.data.total
        }else {
          this.$message.error(res.message)
        }
      }).catch( err => {
        this.$message.error(err.message)
      })
    },
    // 分页
    onPageChange(page) {
      this.page = page
      this.getOtherShopList()
    },
    // 搜索
    onSearch() {
      this.getOtherShopList()
    },
    // 确定更换
    onConfirm() {
      let params = []
      this.otherShops.find((item) => {
        if (item.is_true) params.push(item.mer_id)
      })
      if (params.length < 3) {
        this.$message.warning("至少选择3个商家!")
      } else if (params.length > 10) {
        this.$message.warning("最多选择10个商家!")
      } else {
        requireReplace({mer_id: String(params)}).then((res) => {
          if (res.status === 200) {
            this.shopPic = res.data
            this.showDialog = false
          } else {
            this.$message.error(res.message)
          }
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-checkbox {
  overflow: unset;
}
.hoverBox {
  width: 15px;
  height: 15px;
  position: relative;
}
.hoverBox .showTxt {
  display: none;
  border: 1px solid #eee;
  background: #fff;
  padding: 20px;
  width: 400px;
  position: absolute;
  left: 30px;
  top: -32px;
  height: 82px !important;
  font-size: 12px;
  line-height: 20px;
}
.hoverBox .showTxt::before {
  content: "";
  border: 6px solid transparent;
  border-right-color: #eee;
  position: absolute;
  left: -12px;
  top: 50%;
  margin-top: -6px;
}
.hoverBox:hover .showTxt {
  display: block;
}
.step-two {
  .requireh3 {
    margin-bottom: 14px;
  }
  .switch {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 118px;
    margin: 27px -130px 30px;
    background: #f3f3f7;
    border: 1px solid #e9e9e9;
    position: relative;
    .shop-list {
      display: flex;
      flex-wrap: wrap;
      margin-right: -12px;
      padding-bottom: 30px;
      .shop-pic {
        width: 166px;
        margin-right: 10px;
        margin-bottom: 20px;
        position: relative;
        .pic-box {
          width: 100%;
          height: 130px;
          background: #fff;
          position: relative;
          .close {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            color: #d1d1d1;
            border: 1px solid #d1d1d1;
            background: #fff;
            z-index: 100;
            cursor: pointer;
          }
        }
        .shop-name {
          margin-top: 10px;
          text-align: center;
          z-index: 100;
        }
        .mask {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 166px;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
          z-index: 99;
        }
        &:hover {
          .shop-name {
            color: #fff;
            margin-top: -8px;
            transition: all 0.3s;
            position: relative;
          }
          .mask {
            display: block;
          }
        }
      }
    }
    .sw-btn {
      display: flex;
      position: absolute;
      bottom: 20px;
      left: 10%;
      .btn-theone {
        margin-right: 10px;
      }
      /deep/ .el-button {
        width: 150px;
        // height: 45px;
      }
    }
  }
}
@media only screen and (max-width: 1200px) {
  .step-two {
    .switch {
      margin: 27px -50px 30px;
      padding: 30px 0;
      justify-content: center;
      .shop-list {
        width: 1060px;
      }
    }
  }
}

.suppliers-options {
  margin-top: 50px;

  p {
    font-size: 14px;
    position: relative;
    top: -26px;
  }

  a {
    font-size: 18px;
    font-weight: 900;
    color: #e58a2d;
  }
  .checkbox-item {
    margin-bottom: 20px;
    font-size: 14px;

    &:nth-of-type(3) {
      /deep/ .van-checkbox__label {
        display: flex;
        align-items: center;

        div {
          height: 17px;
        }

        img {
          width: 15px;
          height: 15px;
          margin: 0 5px;
        }
      }
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  // /deep/ .btn-ok {
  //   height:30px;
  //   line-height: 30px;
  // }
}
.content {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  // justify-content: center;
  .shop-list {
    display: flex;
    flex-wrap: wrap;
    // margin-right: -12px;
    // padding-bottom: 30px;
    .shop-pic {
      width: 166px;
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      .pic-box {
        width: 100%;
        height: 130px;
        background: #fff;
        position: relative;
        .close {
          position: absolute;
          top: -5px;
          right: -5px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          text-align: center;
          line-height: 18px;
          color: #e58a2d;
          border: 1px solid #d1d1d1;
          background: #fff;
          z-index: 100;
          cursor: pointer;
        }
      }
      .shop-name {
        margin-top: 10px;
        text-align: center;
        z-index: 100;
      }
      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 166px;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 99;
      }
      &:hover {
        .shop-name {
          color: #fff;
          margin-top: -8px;
          transition: all 0.3s;
          position: relative;
        }
        .mask {
          display: block;
        }
      }
    }
  }
}
.footer {
  display: flex;
  flex-direction: row-reverse;
}
</style>
